<template>
  <div class="clear">
    <div class="clear">
      <div id="top1">
        <el-container>
          <el-header>
            <p>
              <span class="title">今日销售额</span> 菜品库存超出:0
              菜品库存过低:0
            </p>
          </el-header>
          <el-main id="sale">
            <div class="red">
              <p>{{ money }}</p>
              今日总营收(元)
            </div>
            <div class="yellow">
              <p>91</p>
              今日优惠金额(元)
            </div>
            <div class="blue">
              <p>{{ order }}</p>
              今日订单数
            </div>
            <div class="green">
              <p>0.00</p>
              今日退款金额(元)
            </div>
          </el-main>
        </el-container>
      </div>
      <div id="top2">
        <el-container>
          <el-header>
            <p><span class="title">营业动态</span></p>
          </el-header>
          <el-main>
            堂食订单(就餐中)
            <el-progress :percentage="20"
                         :format="format"
                         color="rgb(255,102,0)"></el-progress>
            外卖订单(进行中)
            <el-progress :percentage="30"
                         :format="format"
                         color="rgb(255,102,0)"></el-progress>
            当前预约人数
            <el-progress :percentage="40"
                         :format="format"
                         color="rgb(255,102,0)"></el-progress>
            当前排号人数
            <el-progress :percentage="50"
                         :format="format"
                         color="rgb(255,102,0)"></el-progress>

            <div id="main"
                 style="width: 350px; height: 200px"></div>
          </el-main>
        </el-container>
      </div>
    </div>

    <el-container>
      <el-header>
        <p>今日菜品销售排行榜</p>
      </el-header>
      <el-main>
        <!-- 表格 -->
        <el-table :data="tableData"
                  tooltip-effect="dark"
                  :cell-style="{ border: '1px solid #DCDCDC' }"
                  :header-cell-style="{
            background: '#F0F0F0',
            border: '1px solid #DCDCDC',
            color: '#000000',
          }"
                  style="width: 100%">
          <el-table-column prop="menu_num"
                           label="菜品编号"
                           fixed="left"
                           align="center"></el-table-column>
          <el-table-column prop="menu_name"
                           label="菜品名称"
                           width="200"
                           align="center"></el-table-column>
          <el-table-column prop="menu_price"
                           label="单价"
                           width="150"
                           align="center">
          </el-table-column>
          <el-table-column prop="dish_amount"
                           label="销售笔数"
                           width="200"
                           align="center"></el-table-column>
          <el-table-column prop="salePrice"
                           label="销售金额"
                           width="200"
                           align="center">
          </el-table-column>
          <el-table-column label="折扣额度"
                           fixed="right"
                           align="center">{{
            discount
          }}</el-table-column>
        </el-table>

        <!-- 页码 -->
        <el-pagination :total="total"
                       :page-size="count"
                       @current-change="pageChange"
                       :page-sizes="[5, 10, 15, 20, 25, 30]"
                       layout="total,sizes,prev, pager, next, jumper">
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.clear {
  content: "";
  clear: both;
  display: block;
}
#top1,
#top2 {
  width: 684px;
  float: left;
}
#top1 {
  margin-right: 20px;
}
#top2 .el-container {
  height: 484px;
}
#top2 .el-main {
  /* margin-top: 20px; */
  padding: 40px;
}

#sale > div {
  width: 200px;
  height: 150px;
  float: left;
  text-align: center;
  margin: 20px;
}
.title {
  font-size: 25px;
  margin-right: 150px;
  color: rgb(102, 102, 102);
}
.red {
  background-color: rgb(255, 0, 0);
}
.yellow {
  background-color: rgb(255, 153, 0);
}
.blue {
  background-color: rgb(26, 165, 255);
}
.green {
  background-color: rgb(102, 204, 204);
}
#sale p {
  margin-top: 30px;
  font-size: 40px;
}
.el-container {
  border: 2px solid rgb(242, 242, 242);
  width: 92%;
}
.el-header {
  background-color: rgb(242, 242, 242);
  color: rgb(51, 51, 51);
  text-align: center;
  line-height: 60px;
}

.el-progress {
  width: 80%;
  margin-bottom: 10px;
}
.el-main {
  padding: 20px;
}
#tit {
  font-size: 20px;
}
.el-pagination {
  margin-top: 10px;
  text-align: center;
}
</style>
<script>
import * as echarts from "echarts/core";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  PieChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LegendComponent,
]);
export default {
  data: function () {
    return {
      totalData: [
        {
          salePrice: 0,
        },
      ],
      page: 1,
      count: 5,
      discount: "5%",
      order: 0,
      money: 0,
    };
  },
  methods: {
    pageChange: function (n) {
      this.page = n;
    },
    format (percentage) {
      return percentage === 100 ? "满" : `${percentage}`;
    },
    // 批量选择
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    getdata: function () {
      //获取今日订单数量
      this.$axios({
        url: "/homepage/getOrder",
      }).then((res) => {
        console.log(res.data.data);
        this.order = res.data.data[0].total;
      });

      //获取今日总营收
      this.$axios({
        url: "/homepage/getMoney",
      }).then((res) => {
        this.money = res.data.data[0].money;
      });
    },
    getmenu: function () {
      this.$axios({
        url: "/homepage/getMenu",
      }).then((res) => {
        this.totalData = res.data.data;
        this.totalData.forEach((v) => {
          v.salePrice = v.menu_price * v.dish_amount;
        });

        // console.log(res.data.data);
      });
    },
  },
  mounted () {
    this.getmenu();
    this.getdata();


    var myChart = echarts.init(document.getElementById("main"));
    var option = {
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "5%",
        left: "center",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "left",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 91, name: "优惠金额" },
            { value: 1500, name: "实际总营收" },
            // { value: 580, name: "黄焖鸡" },
            // { value: 484, name: "螺蛳粉" },
            // { value: 300, name: "抄手" },
          ],
        },
      ],
    };
    myChart.setOption(option);
  },
  computed: {
    total: function () {
      // if (this.search) {
      //   let arr = this.totalData.filter((v) => {
      //     if (v.menu_name.indexOf(this.search) != -1) {
      //       return v;
      //     }
      //   });
      //   return arr.length;
      // } else {
      //   return this.totalData.length;
      // }

      return this.totalData.length;
    },
    tableData: function () {
      // if (this.search) {
      //   let arr = this.totalData.filter((v) => {
      //     if (v.menu_name.indexOf(this.search) != -1) {
      //       return v;
      //     }
      //   });
      //   return arr.slice((this.page - 1) * this.count, this.page * this.count);
      // } else {
      //   return this.totalData.slice(
      //     (this.page - 1) * this.count,
      //     this.page * this.count
      //   );
      // }

      return this.totalData.slice(
        (this.page - 1) * this.count,
        this.page * this.count
      );
    },
  },
};
</script>